<template>
  <div class="stock-management-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <super-table
        :height="tableHeight"
        :activeKey="activeKey"
        ref="tableRef"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
      >
        <template #tool>
          <div style="display: flex; justify-content: space-between">
            <div>
              <!-- <a-button type="primary" @click="exportHandle" v-debounce>批量导出</a-button> -->
              <a-button type="primary" @click="modifyChannelHandle" v-btnAuth="'STOCKMANAGEMENT_WAYBILL_CHANNEL'">更改渠道</a-button>
              <!-- <a-button type="primary" @click="modifyProductNameHandle">品名</a-button>
              <a-button type="primary" @click="modifyMasterialHandle">材质</a-button> -->
              <a-button type="primary" @click="modifyRemarkHandle">修改客户备注</a-button>
              <a-button type="primary" @click="modifyInnerRemarkHandle">修改内部备注</a-button>
              <a-button type="primary" @click="handPickingOrderHandle" v-btnAuth="'MANUAL_PICKING'">手动拣货</a-button>
              <a-button type="primary" @click="makeInvoiceHandle" v-btnAuth="'STOCKMANAGEMENT_WAYBILL_INVOICE'">制作发票</a-button>
              <a-button v-debounce type="primary" @click="createWorkOrderHandle">创建工单</a-button>
              <a-button type="primary" @click="customsClearanceHandle">合并报关</a-button>
            </div>

            <!-- 推送下单 -->
            <div v-btnAuth="'CREATE_STOCKMANAGEMENT_WAYBILL'">
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 推送下单 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="createShipmentHandle">创建运单</a-menu-item>
                    <a-menu-item @click="cancelShipmentHandle">取消运单</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>

            <!-- 打印标签、下载标签 -->
            <div>
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 标签管理 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="printLabelHandle">打印标签</a-menu-item>
                    <a-menu-item @click="downloadLabelHandle(undefined)">下载标签</a-menu-item>
                    <a-menu-item @click="downloadLabelHandle(1)">合并下载</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>

            <!-- 导出管理 -->
            <div>
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 导出 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="exportHandle">批量导出</a-menu-item>
                    <a-menu-item @click="invoiceExportHandle">发票导出</a-menu-item>
                    <a-menu-item @click="templateExportHandle">使用模版导出</a-menu-item>
                    <a-menu-item @click="customExportHandle">自定义导出</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </div>
        </template>

        <template #itemNumber="{ row }">
          <span style="color: red">{{ row.pickingBoxNum ? row.pickingBoxNum : 0 }} / {{ row.itemNumber }} </span>
        </template>

        <template #completeAddress="{ row }">
          <div class="templateDiv">
            <span class="changeAddressTitle">{{ row.completeAddress }}</span>
            <div><a-button type="link" @click="modifyPickupAddressHandle(row)" v-if="row.shippingMethod === 0">修改</a-button></div>
          </div>
        </template>
        <template #expectedPickupTime="{ row }">
          <div class="templateDiv">
            <span v-if="row.expectedPickupTime"> {{ dayjs(Number(row.expectedPickupTime)).format("YYYY-MM-DD HH:mm:ss") }}</span>
            <span v-if="!row.expectedPickupTime"></span>
            <div><a-button type="link" @click="modifyTimeHandle(row)" v-if="row.shippingMethod === 0">修改</a-button></div>
          </div>
        </template>

        <template #waybillNum="{ row }">
          <a-button type="link" @click="showHandle(row)">{{ row.waybillNum }}</a-button>
        </template>
        <template #addressType="{ row }">
          <a-tag v-if="row.addressType === 'AMAZON'" color="#108ee9">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
          <a-tag v-if="row.addressType === 'WALMART'" color="#2db7f5">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
          <a-tag v-if="row.addressType === 'PERSONALWAR'" color="#f50">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
        </template>
        <template #makeInvoiceStatus="{ row }">
          <a-tag v-if="row.makeInvoiceStatus === -1" color="#f50">未制作发票</a-tag>
          <a-tag v-if="row.makeInvoiceStatus === -2" color="#2db7f5">已制作发票</a-tag>
        </template>
      </super-table>
    </div>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :closable="true" @close="drawerOpts.visible = false" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerOpts.visible = false"></component>
    </a-drawer>
    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import Details from "./components/details/index.vue";
import ModifyChannel from "./components/modifyChannel/index.vue";
import ModifyProductName from "./components/modifyProductName/index.vue";
import ModifyMasterial from "./components/modifyMasterial/index.vue";
import ModifyRemark from "./components/modifyRemark/index.vue";
import PickingOrder from "./components/pickingOrder/index.vue";
import MakeInvoice from "./components/makeInvoice/index.vue";
import CreateWorkOrder from "@/views/waybillManagement/customerServiceWaybill/components/createWorkOrder/index.vue";
import InvoiceExport from "@/views/waybillManagement/businessWaybill/waybillList/components/InvoiceExport/index.vue";
import ModifyPickupAddress from "./components/modifyPickupAddress/index.vue";
import TemplateExport from "@/views/waybillManagement/businessWaybill/waybillList/components/templateExport/index.vue";
import CustomExport from "@/views/waybillManagement/businessWaybill/waybillList/components/customExport/index.vue";

import ModifyTime from "./components/modifyTime/index.vue";
import dayjs from "dayjs";

export default {
  name: "StockManagement",
  components: {
    Details,
    ModifyChannel,
    ModifyProductName,
    ModifyMasterial,
    ModifyRemark,
    PickingOrder,
    MakeInvoice,
    CreateWorkOrder,
    InvoiceExport,
    ModifyPickupAddress,
    ModifyTime,
    TemplateExport,
    CustomExport
  }
};
</script>
<script lang="ts" setup>
import TableHeightHook from "@/hook/tableHeightHook";
import ModalHook from "@/hook/modalHook";
import CommonHook from "@/hook/commonHook";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { DownOutlined } from "@ant-design/icons-vue";
import { searchItemList, tableColumn } from "./data";
import { onActivated, onMounted } from "vue";
const { tableHeight, loading } = TableHeightHook(50);
const { getLabelByDict } = CommonHook();
// const tableColumn = computed<Array<SuperTable.TableCoulmnItem | SuperTable.NestTableColumnItem>>(() => {
//   return tableColumnMap[activeKey.value];
// });
const { tableData, searchForm, drawerOpts, activeKey, pageStat, tableRef, dialogOpts, getPopupContainer } = InitHook();
const {
  searchHandle,
  getData,
  showHandle,
  modifyChannelHandle,
  // modifyProductNameHandle,
  // modifyMasterialHandle,
  modifyRemarkHandle,
  modifyInnerRemarkHandle,
  handPickingOrderHandle,
  makeInvoiceHandle,
  cancelShipmentHandle,
  printLabelHandle,
  downloadLabelHandle,
  createShipmentHandle,
  createWorkOrderHandle,
  exportHandle,
  invoiceExportHandle,
  modifyPickupAddressHandle,
  modifyTimeHandle,
  customsClearanceHandle,
  templateExportHandle,
  customExportHandle
} = OperationHook({
  searchForm,
  tableData,
  drawerOpts,
  loading,
  activeKey,
  pageStat,
  tableRef,
  dialogOpts
});
const init = () => {
  if (history.state.params) {
    searchForm.preOrderNoList = history.state.params.preOrderNoList;
  }
  searchHandle();
};
onMounted(() => {
  init();
});
onActivated(() => {
  init();
});
const { dialogSubmitHandle } = ModalHook({
  drawerOpts,
  dialogOpts,
  callBack: () => getData()
});
</script>
<style lang="stylus" scoped>
.stock-management-page{

  .templateDiv{
    display:flex;
    align-items:center;
    justify-content:center
  }

  .changeAddressTitle{
    width 80%
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
